<template>
    <div class="Filter_element" ref="Filter_element">
        <a-card hoverable>
            <Transition name="fade">
                <div class="mask-box" v-if="isLoading"></div>
            </Transition>
            <div class="filter-tools" v-for="item in filter_tools" :key="item.title">
                <div class="filter-tools-flex" :style="{ 'height': item?.collapse ? 'auto' : '50px' }">
                    <div class="title">
                        {{ item.title }}
                    </div>
                    <div class="filter-tools-list">
                        <div class="filter-tools-item" @click="changeFilter(item, item2, index)"
                            :class="item2.checked ? 'active-color' : ''" v-for="(item2, index) in item.list"
                            :key="item2.title">
                            {{ item2.title }}
                        </div>
                        <div class="collapse-more" v-if="item?.isShowCollapse">
                            <div class="down" v-if="!item?.collapse" @click="onClickCollapse(item, !item?.collapse)">
                                <span>展开</span>
                                <i></i>
                            </div>
                            <div class="up" v-else @click="onClickCollapse(item, !item?.collapse)">
                                <span>收起</span>
                                <i></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a-row :gutter="20">
                <a-col :xl="6" :lg="8" :sm="12" :sx="24" class="content-item" v-for="item in filterDataList"
                    :key="item.title">
                    <div class="content">
                        <div class="img-box">
                            <img :src="item.img" alt="">
                        </div>
                        <div class="contents">
                            <div class="title">{{ item.title }}</div>
                            <div class="footer">
                                <div class="desc gray-font">
                                    <span>评论 {{ item.commentNum }}</span>
                                    <span>收藏 {{ item.collectNum }}</span>
                                </div>
                                <div class="price-desc">
                                    <div class="price">
                                        <span class="price-icon">￥</span>
                                        <span class="price-money">{{ item.price }}</span>
                                    </div>
                                    <div class="sale-count gray-font">月销<span>{{ item.salesNum }}</span>笔</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a-col>
            </a-row>
            <div class="filter-pager">
                <a-pagination v-model:current="current1" show-quick-jumper :total="500" @change="onChange" />
            </div>
        </a-card>
    </div>
</template>

<script setup lang="ts" name="Filter_element">
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
import type { Ref } from 'vue';
import { filter_element } from './mock'
import { filterDataList } from '/@/mock/index'
import type { ToolBarItem, ToolBarList } from '/@/typings/Views';
// mask
let isLoading = ref<boolean>(false)
let lodingTimer = ref<number | null>(null)

// filter_tools
const filter_tools: Ref<ToolBarItem[]> = ref(Object.values(filter_element.filter_tools))
const changeFilter = (item: ToolBarList, item2: ToolBarItem, index: number) => {
    item.list!.map((item: ToolBarItem) => {
        item.checked = false
    })
    item2.checked = true
    if (lodingTimer.value) {
        clearTimeout(lodingTimer.value)
        lodingTimer.value = null
        return
    }
    isLoading.value = true
    lodingTimer.value = setTimeout(() => {
        isLoading.value = false
        lodingTimer.value = null
    }, 500);
}
const onClickCollapse = (item: ToolBarList, flag: boolean) => {
    item.collapse = flag
}



// pager
const current1 = ref<number>(1);
const onChange = (pageNumber: number) => {
    console.log('Page: ', pageNumber);
};

// collapse func
let domWidthArrs = reactive<Array<number>>([])
let Filter_element = ref<HTMLDivElement | null>(null)

onMounted(() => {
    setFilterToolsCollapse()
})
onBeforeUnmount(() => {
    window.removeEventListener('resize', setCollapse)

})
const setCollapse = () => {
    let dom: HTMLDivElement = Filter_element.value as HTMLDivElement
    let filterDomWidth = (<HTMLElement>dom.querySelector('.filter-tools-list')).offsetWidth
    domWidthArrs.forEach((width: number, index: number) => {
        if (Math.ceil(filterDomWidth) <= width) {
            Object.keys(filter_tools.value).forEach((key: string, index2: number) => {
                if (index2 === index) {
                    filter_tools.value[key].isShowCollapse = true
                }
            })
        } else {
            Object.keys(filter_tools.value).forEach((key, index2: number) => {
                filter_tools.value[key].isShowCollapse = false
            })
        }
    })
}
const setFilterToolsCollapse = () => {
    let dom: HTMLDivElement = Filter_element.value as HTMLDivElement
    let filters = dom.querySelectorAll('.filter-tools-list')
    filters.forEach(item => {
        let doms = item.querySelectorAll('.filter-tools-item')
        let widths = 0
        doms.forEach((item: any) => {
            widths += item.offsetWidth
        })
        domWidthArrs.push(widths)
    })
    setCollapse()
    window.addEventListener('resize', setCollapse)
}
</script>

<style scoped lang="scss">
$border-color: var(--wangwang-border);

.Filter_element {
    :deep(.ant-card-bordered) {
        border: 1px solid $border-color !important;
    }

    .filter-tools {
        font-size: 14px;
        border-bottom: 1px solid $border-color;
        padding-right: 24px;
        position: relative;

        .filter-tools-flex {
            height: 50px;
            display: flex;
            overflow: hidden;

            .title {
                position: relative;
                width: 64px;
                height: 50px;
                align-items: center;
                font-weight: 700;
                display: flex;
                color: #909399;

                &::after {
                    content: "";
                    position: absolute;
                    border: 1px solid $border-color;
                    border-width: 0 1px 1px 0;
                    width: 4px;
                    height: 4px;
                    transform: rotate(-45deg) translateY(-50%);
                    right: 10px;
                    top: 50%;
                }
            }

            .filter-tools-list {
                flex: 1;
                display: flex;
                flex-wrap: wrap;

                .filter-tools-item {
                    color: #8d8d91;
                    padding: 0 15px;
                    height: 50px;
                    display: flex;
                    align-items: center;

                    &.active-color {
                        color: var(--wang-menu-activetext);
                    }
                }

                .collapse-more {
                    background-color: #fff;
                    font-size: 12px;
                    position: absolute;
                    right: 0;
                    top: 16px;
                    color: #a5a5a5;

                    &:hover {
                        color: #8d8d91;
                    }
                }
            }
        }
    }

    .ant-row {
        margin-top: 20px;
        position: relative;
    }

    .mask-box {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9;

    }

    .ant-col {
        margin-bottom: 20px;
    }

    .content {
        border: 1px solid $border-color;
        transition: all .3s ease;
        height: 360px;
        display: flex;
        flex-direction: column;

        &:hover {
            border: 1px solid var(--wang-menu-activetext);

            .contents {
                .title {
                    color: var(--wang-menu-activetext);

                }
            }
        }

        .img-box {
            height: 215px;
            overflow: hidden;

            img {
                height: 100%;
                width: 100%;
                transition: all .3s ease;

                &:hover {
                    transform: scale(1.05);
                }
            }
        }

        .contents {
            padding: 15px;
            flex: 1;
            display: flex;
            flex-direction: column;

            .footer {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
            }

            .desc {
                margin-top: 10px;
                margin-bottom: 8px;

                span {
                    display: inline-block;
                    margin-right: 12px;
                }
            }

            .title {
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                color: var(--wang-text-color);
                transition: all .3s ease;

                &:hover {
                    text-decoration: underline;
                }
            }

            .gray-font {
                font-size: 12px;
                color: #8d8d91;
            }

            .price-desc {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;

                .price {
                    color: #FF5000;

                    .price-icon {
                        font-size: 12px;
                    }

                    .price-money {
                        font-size: 22px;
                    }
                }
            }
        }
    }
}

// fade
.fade-enter-active,
.fade-leave-active {
    transition: opacity .3s ease;
}

.fade-enter-from,
.fade-leave-to {
    opacity: 0;
    background-color: #fff;
}

.fade-enter-to,
.fade-leave-from {
    opacity: 0.2;
    background-color: #fff;
}
</style>